<!--
 * @Author: 邵渊
 * @LastEditors: 邵渊
 * @Description: 单选放大镜
-->
<template>
  <div class="lc-magnifier-single">
    <el-input
      ref="inputRef"
      type="text"
      v-model="innerValue"
      v-bind="$attrs"
      :disabled="disabled"
      :placeholder="placeholder"
      :suffix-icon="Search"
      @click="handleFocus"
    />
  </div>
  <div v-show="dialogShow">
    <el-dialog
      v-model="dialogVisible"
      title="单选放大镜"
      width="1000"
      style="padding: 30px"
      @closed="dialogCLosed"
    >
      <slot name="searchBar">
        <!-- 搜索条插槽 -->
      </slot>
      <slot name="infoBar">
        <!-- 信息插槽 -->
      </slot>
      <slot name="table">
        <!-- 表格插槽 -->
      </slot>
      <!-- 弹窗footer插槽 -->
      <template #footer>
        <div class="dialog-footer">
          <slot name="footer">
            <!-- 底部按钮插槽 -->
          </slot>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
const emits = defineEmits(["changeDialog"]);

const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  //输入提示语
  placeholder: {
    type: String,
    default: "",
  },
  showDialog: {
    type: Boolean,
    default: false,
  },
});

const innerValue = ref(props.modelValue);
const inputRef = ref(null);
const dialogVisible = ref(props.showDialog);

watch(
  () => props.modelValue,
  (newValue) => {
    innerValue.value = newValue;
  },
);

watch(
  () => props.showDialog,
  (newValue) => {
    dialogVisible.value = newValue;
  },
);

const handleFocus = () => {
  emits("changeDialog", true);
  dialogShow.value = true;
};

const dialogShow = ref(true);

const dialogCLosed = () => {
  inputRef.value.blur();
  emits("changeDialog", false);
};
</script>
<style scoped>
:deep(.el-dialog__header) {
  height: 10px !important;
}
:deep(.el-table__row) {
  height: 32px;
}
:deep(.el-dialog) {
  height: 580px !important; /* 调整对话框高度 */
}
</style>
